<template>
  <div class="background-video-container">
    <!-- <div
      v-show="loading"
      class="realTime-ala-loading"
      ref="realTimealaloading"
    ></div> -->
    <hkarVideo v-if="url" :showDetail="false" ref="videoDom" :src="url" />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, onUnmounted, watch } from "vue";
import { getRtsp } from "@/api/screen/equipment";
import emits from "@/utils/emits";
import lottie from "lottie-web";
import jsonData from "./Animation - 1700103031695.json";
import { getEqByCode, getSubordinateEquipments } from "@/api/equipment";
import hkarVideo from "@/components/hkarVideo/video-player.vue";
const url = ref(null);
const videoDom = ref(null);
const realTimealaloading = ref(null);
const loading = ref(true);
// const getVideoUrl = async (videoID: any) => {
//   let res = (await getRtsp(videoID)) as any;
//   if (res.code == 200) {
//     url.value = res.data;
//   }
// };
const init = async () => {
  url.value = null;
  // 定义参数对象
  let params = { regionCode: "ALL", type: "监控设备", model: "鹰眼" };

  let arhkList: any = await getSubordinateEquipments(params);

  // 获取第一个设备的设备位置编码
  let code = arhkList.data[0].equipmentLocationCode;

  // 获取指定设备的扩展属性基础参数列表
  let resList: [] = (await getEqByCode(code)).data.extendProperty
    .baseParamsList;

  // 创建一个映射对象
  let arMap = new Map();

  // 遍历resList数组，将每个元素的paramKey和defaultValue添加到映射对象arMap中
  resList.map((item: any) => {
    arMap.set(item.paramKey, item.defaultValue);
  });

  // 构建rtsp播放地址
  let arurl = `rtsp://${arMap.get("username")}:${arMap.get(
    "password"
  )}@${arMap.get("deviceIp")}:554/Streaming/Channels/${arMap.get(
    "panoramicChannel"
  )}?transportmode=unicast`;

  // 将arurl赋值给url
  url.value = arurl;
  console.log("ar", arMap);
};

onMounted(() => {
  nextTick(() => {
    lottie.loadAnimation({
      container: realTimealaloading.value, // 挂载在某个容器下面
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: jsonData, //动画json
    });
    init();
  });
  emits.on("ARHK_RECONNECT", init);
});
onUnmounted(() => {
  if (videoDom.value) {
    videoDom.value = null;
    emits.emit("CLOSE_VIDEO");
  }
});
watch(
  () => url.value,
  (newVal) => {
    if (newVal) {
      loading.value = false;
    } else {
      loading.value = true;
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>
<style lang="scss" scoped>
.background-video-container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  background-color: #333333;
  .realTime-ala-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
  }
}
</style>
